<template>
	<view style="height: 100%;">
		<view v-if="hasShow == 'list'" :class="showtype ? 'card list' : 'list'">
			<block v-for="(item, i) in list" :key="i">
				<view class="list_item" @click="todetail(item)">
					<view class="img_box"><easy-loadimage :borderradius="12" :sellout="item.sellout" :image-src="item.master"></easy-loadimage></view>
					<view class="item_info">
						<text class="goods_name u-line-2">{{ item.goods_name }}</text>

						<view class="price_box">
							<view class="price_left price_div">
								<text class="txt_1">
									<text class="text">&yen;&nbsp;</text>
									{{ item.sell_price }}
								</text>
								<view class="vip-price" v-if="item.now_level_price > 0">
									<!-- <image src="../../static/images/vipprice.png" mode="widthFix"></image> -->
									<text class="vip-name">会员价: ￥{{ item.now_level_price }}</text>
								</view>
								<text v-else class="txt_2">&yen;&nbsp;{{ item.original_price }}</text>
							</view>
							<view class="price_right price_div">
								<text @click.stop="gotrolley(item)" :class="mallBaseinfo.trolley_pic + ' iconfont'"></text>
								<text class="txt_2">销量：{{ item.sell + (item.is_virtual ? item.virtual_sell : 0) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="yline" v-if="showtype"></view>
				<!-- <u-line :hair-line='false' color="#e6e7eb" v-if="showtype"></u-line> -->
			</block>
		</view>
		<view style="height: 100%;" v-if="hasShow == 'none'" class=""><u-empty text="暂无数据" mode="list"></u-empty></view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	props: {
		cid: {
			type: String,
			default: ''
		},
		showtype: {
			type: Number,
			default: 1
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		cid() {
			this.list = [];
			this.page = 1;
			this.goodslist();
		}
	},
	data() {
		return {
			list: [],
			page: 1,
			scrollviewHigh: 667,
			hasShow: 'list'
		};
	},
	mounted() {
		this.goodslist();
	},
	computed: {
		...mapState({
			mallBaseinfo: state => state.mallBaseinfo
		})
	},
	methods: {
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id
			};
			this.$store.commit('settrolley', data);
		},
		goodslist() {
			let params = {
				page: this.page,
				size: 12,
				classify_id: this.cid
			};
			this.$http('/goods/list', params, 'post').then(res => {
				this.changeloading({loading: false});
				let jsondata = res.data;
				let list = jsondata.msg.data;

				if (list.length > 0) {
					this.hasShow = 'list';
					list.forEach(a => {
						a.sellout = !(a.sell - a.total);
						if(a.sku&&a.sku.length>0){
							a.now_level_price = util.getminprice(a.sku);
						}else{
							if (a.level_price) {
								a.now_level_price = util.getprice(a);
								
							}
						}
						
					});
					this.list = this.list.concat(list);
					this.page++;
				} else {
					if (this.page == 1) {
						this.hasShow = 'none';
					}
					// uni.showToast({
					// 	title: '加载完了',
					// 	icon: 'none'
					// });
				}
			});
		},
		todetail(item) {
			this.Jumpurl({
				type: 2,
				id: item.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.yline{
		height: 2rpx;
		background-color:#e6e7eb;
		width: 100%;
	}
.list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 24rpx;
	justify-content: space-between;
	padding-top: 10rpx;

	.list_item {
		display: flex;
		width: 346rpx;
		flex-direction: column;
		background: #ffffff;
		margin-bottom: 10rpx;
		border-radius: 12rpx;
		overflow: hidden;
		.img_box {
			height: 346rpx;
			// image {
			// 	width: 346rpx;
			// 	height: 346rpx;
			// }
			position: relative;
			/deep/.easy-loadimage {
				width: 346rpx;
				height: 346rpx;
			}
		}
		.item_info {
			padding: 16rpx 8rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.goods_name {
			line-height: 40rpx;
			color: #212121;
			font-size: 28rpx;
			font-weight: 500;
			&.two-line-hide {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
		.price_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price_div {
				display: flex;
				flex-direction: column;
			}
			.price_left {
				.txt_1 {
					font-size: 32rpx;
					font-weight: 700;
					color: #ff3c29;
					line-height: 40rpx;
					.text {
						font-size: 20rpx;
						font-weight: 300;
					}
				}
				.txt_2 {
					color: #969696;
					font-size: 20rpx;
					text-decoration: line-through;
				}
			}
			.price_right {
				text-align: right;
				.iconfont {
					color: var(--main-color);
					font-size: 40rpx;
					line-height: 40rpx;
				}
				.txt_2 {
					color: #969696;
					font-size: 20rpx;
				}
			}
		}
	}
}
.card {
	padding: 0;
	.list_item {
		width: 100%;
		flex-direction: row;
		padding: 16rpx 24rpx;
		.img_box {
			width: 160rpx;
			height: 160rpx;
			position: relative;
			margin-right: 12rpx;
			/deep/.easy-loadimage {
				height: 160rpx;
				width: 160rpx;
				border-radius: 12rpx;
				.origin-img,
				.loadfail-img,
				.loading-img {
					border-radius: 12rpx;
				}
			}
		}
	}
}

</style>
